<!--
 * @Description  :
 * @Version      : 1.0
 * @Author       : seraph
 * @Date         : 2024-12-13 16:08:18
 * @LastEditors  : seraph
 * @LastEditTime : 2025-01-29 02:44:46
-->
<template>
  <h3>双大括号会将数据解释为纯文本，而不是 HTML。</h3>
  <p>示例代码：</p>
  <pre><code class="html" v-html="highlighted1"></code></pre>
  <p>模板中，使用双大括号包裹 rawHtml1 后，显示效果如下：</p>
  <p>{{ rawHtml1 }}</p>
  <hr />

  <h4>若想插入 HTML, 需要使用 <span class="red">v-html</span> 指令。</h4>
  <p>在使用 v-html 指令时，使该指令的标签内不能有任何非空白内容，否则会导致渲染出错。</p>
  <p>示例代码（其中 rawHtml1 的内容如上例所示）：</p>
  <pre><code>{{ rawHtml2 }}</code></pre>
  <p>实际效果：</p>
  <p><span v-html="rawHtml1"></span></p>
  <br />
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/atom-one-dark.css'
import javascript from 'highlight.js/lib/languages/javascript'
import html from 'highlight.js/lib/languages/xml'
import '@/assets/css/code.css'
import { register } from 'module'

hljs.registerLanguage('javascript', javascript)
hljs.registerLanguage('html', html)

const rawCode1 = `// 模板文件
{{ rawHtml1 }}
// 脚本文件
const rawHtml1 = ref('<span>Just like this! This color is <span style="color:green; font-weight: bolder;">green</span>.</span>')`
const rawHtml1 = ref(
  '<span>Just like this! This color is <span style="color:green; font-weight: bolder;">green</span>.</span>',
)
const highlighted1 = ref(
  hljs
    .highlight(rawCode1, { language: 'html' })
    .value.replace(/&amp;lt;/g, '&lt;')
    .replace(/&amp;gt;/g, '&gt;'),
)

const rawHtml2 = ref('<span v-html="rawHtml1"></span>')
</script>

<style scoped>
.red {
  color: red;
}
</style>
